<template>
    <div class="poi">
        <el-carousel trigger="click" height="450px">
          <el-carousel-item v-for="item in list" :key="item.id">
            <img :src="item.imgUrl" alt="">
          </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
// 请求banner的接口数据
import { getBanner } from '@/request/api/myc/myc';
    export default {
        data(){
            return{
                list:[]
            }
        },
        mounted() {
            this.Category();

        },
        methods: {
            async Category() {
                const res = await getBanner();
                console.log("新鲜好物", res.data.result);
                this.list = res.data.result
            }
        }
    }
    
</script>

<style lang="scss" scoped>
.poi{
    position: absolute;
    left: 0;
    top: 0;
    height: 450px;
    width: 100%;
}
.luobo {
    height: 450px;
    background: #f5f5f5;
}

.lb {
    // z-index: 200;
    position: relative;
    top: -450px;
}
.demonstration {
    color: var(--el-text-color-secondary);
}
img{
    width: 100%;
    height: 100%;
}
:deep(.el-carousel__indicators--horizontal){
    // width: 200px;
    height: 30px;
    // background: red;
    margin-bottom: 20px;
    margin-left: 140px;
    .el-carousel__button{
        margin-right: 8px;
        width: 20px;
        height: 20px;
        background: #fff;
        border-radius: 50%;
        
    }
}
:deep(.is-active){
    .el-carousel__button{
        width: 20px;
        height: 20px;
        background: rgba($color: #000000, $alpha: 0.2);
        border-radius: 50%;
        
    }
}
:deep(.el-carousel__arrow--left){
    left: 266px;
}
</style>